import React from 'react';
import './index.css';

import mzsdk from '../../../../utils/mzsdk';

import { Toast } from 'antd-mobile';

import MZActionSheet, { showActionSheet, closeActionSheet } from '../../../../components/MZActionSheet';
import OnlineAudience from '../OnlineAudience';

/**
 * 在线观众入口
 */

export default class OnlineAudienceEnter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            audiences: [],//观众列表,非完整
            total: this.props.ticketInfo && this.props.ticketInfo.webinar_onlines ? this.props.ticketInfo.webinar_onlines : 0,//在线总人数
        }
    }

    componentWillUnmount() {
        mzsdk.mzee.off('update-audiences-change')
    }

    componentDidMount() {
        var _this = this;
        //因为链接socket成功有延迟，所以这里延迟个1.5秒
        //这里获取前50位观众是为了展示3个头像
        setTimeout(() => {
            mzsdk.getOnlines({ ticketId: _this.props.ticketInfo.ticket_id, offset: '0', limit: '50' }).then(res => {
                console.log('获取初始化在线观众：', res)
                let total = res.length < 50 ? res.length : _this.state.total;
                _this.setState({
                    audiences: res,
                    total: total
                })
            }, (err) => {
                Toast.info(err.msg, 1.5)
            })
        }, 1500);

        mzsdk.mzee.on("update-audiences-change", function (e) {
            //在线观众有变化
            switch (e.event) {
                case 'online':
                    console.log('上线了一个用户:', e)
                    if (e.data.is_hidden == 1) return;//机器人不统计
                    if (e.data.user_id >= 5000000000) return;//游客不统计
                    let index = _this.state.audiences.findIndex(t => t.uid == e.data.user_id);
                    if (index <= -1) {
                        _this.state.audiences.push({
                            uid: e.data.user_id,
                            nickname: e.user_name,
                            avatar: e.avatar,
                        })
                        _this.state.total = _this.state.total + 1;
                        _this.setState({
                            audiences: _this.state.audiences,
                            total: _this.state.total
                        })
                    }
                    break;
                case 'offline':
                    console.log('下线了一个用户:', e)
                    if (e.data.is_hidden == 1) return;//机器人不统计
                    if (e.data.user_id >= 5000000000) return;//游客不统计
                    let index1 = _this.state.audiences.findIndex(t => t.uid == e.data.user_id);
                    if (index1 > -1) {
                        _this.state.audiences.splice(index1, 1);
                        _this.state.total = _this.state.total - 1 < 0 ? 0 : _this.state.total - 1;
                        _this.setState({
                            audiences: _this.state.audiences,
                            total: _this.state.total
                        })
                    }
                    break;
                default:
                    console.log('更新在线观众总人数:', e)
                    if (e.audiences) {
                        _this.setState({
                            audiences: e.audiences,
                            total: e.audiences.length
                        })
                    }
                    break;
            }
        })
    }

    onShowAudienceList = () => {
        showActionSheet(
            <MZActionSheet title='在线观众'>
                <OnlineAudience ticketId={this.props.ticketInfo.ticket_id} onClose={() => { closeActionSheet() }} />
            </MZActionSheet>
        )
    }

    render() {
        let { audiences, total } = this.state;

        const show = audiences.slice(-3)//取最后3个元素，不影响源数据
        // const show = audiences.splice(-3,3)//取最后3个元素，源数据减少

        return (
            <div className="live-audiences-background" onClick={this.onShowAudienceList}>
                <div className="live-audiences-total">{total}</div>
                {
                    show.map((item, index) => {
                        return (
                            <img key={index} className={`live-audiences-avatar in${index}`} src={item.avatar}></img>
                        )
                    })
                }
            </div>
        )
    }
}
